<template>
  <n-space vertical align="center">
    <n-avatar v-bind="avatarProps"></n-avatar>
    <span v-if="text">{{ text }}</span>
  </n-space>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { NAvatar, NSpace } from 'naive-ui'

const props = defineProps({
  ...NAvatar.props,
  charId: String,
  text: String
})

const avatarProps = computed(() => {
  const p = {...props}
  p.src = `/images/char/${props.charId || 'char_506_rmedic'}.png`
  p.size = parseInt(p.size) || p.size
  p.color = '#0000'
  // console.log('here', p)
  return p
})
</script>

<style scoped>
.n-avatar:hover {
    background:#ffffff30;
    box-shadow:2px 2px 4px #444444;
}
span {
  font-weight: 600;
  font-size: 20px;
}
</style>
